{% extends "kjs/rainbow/layouts/main.html" %}

{% block common_css %}
    {{ block.super }}

    <style type="text/css">
        div#fixed_width_left_widget {
            width:30%;
            min-height:100%;
            float:left;
        }
        div#rainbow_photo_show_widget {
            min-width:300px;
            min-height:100px;
            margin-left:300px;
            background:url("{{ STATIC_URL }}commons/background/8f1f1_background.png") #000000;
            padding:5%;
        }

        /* 横向用户信息 */
        div.rainbowUserLineProfileWidget {
            margin-bottom:20px;
        }
        div.rainbowUserLineProfileWidget a {
            color:white;
        }
        div.rainbowUserLineProfileWidget img {
            float:left;
            width:12%;
        }
        div.rainbowUserLineProfileWidget div.rainbowUserLineProfileContentWidget {
            width:84%;
            padding-left:2%;
            padding-right:2%;
            margin-left:12%;
        }
        /* 用户评论 */
        div#rainbow_photoframe_comments_widget {
        }
        div#rainbow_photoframe_comments_widget ul {
            margin:0;
            padding:0;
            list-style-type:none;
        }
        div#rainbow_photoframe_comments_widget ul li {
            padding:10px;
            color:#dcdcdc;
        }
        div#rainbow_photoframe_comments_widget ul li:hover {
            box-shadow:0 0 4px #dcdcdc;
        }
        div#rainbow_photoframe_comments_widget ul li button {
            display:none;
        }
        div#rainbow_photoframe_comments_widget ul li:hover button {
            display:block;
        }
        div#rainbow_photoframe_comments_widget form {
            padding:10px;
            border-top:1px solid #dcdcdc;
        }


    </style>
{% endblock %}

{% block rainbow_body %}
    <div class="centerContent">
        <div id="fixed_width_left_widget" style="float:left;">
            <div class="jqueryLoadWidget">
                <a href="/rainbow/album/{{ photo_instance.album.id }}/of/user/{{ photo_instance.album.user.id }}/show?format=sample"></a>
            </div>
        </div>
        <div id="rainbow_photo_show_widget">
            {% include "kjs/rainbow/frame/widgets/show/_user_profile.html" %}
            {% include "kjs/rainbow/frame/widgets/show/_user_action.html" %}
            <div style="padding:5%;">
                <div style="font-size:36px;margin-bottom:20px;color:#dddddd;">
                    <label>{{ photo_instance.subject }}</label>
                </div>
                <div style="margin-bottom:20px;">
                    <div style="background:white;padding:2%;border-radius:2px;">
                        <div class="jqueryLoadWidget">
                            <a href="/rainbow/photoframe/{{ photo_instance.id }}/show?format=sample"></a>
                        </div>
                    </div>
                </div>
                <div style="margin-bottom:20px;">
                    {% for label in photo_instance.labels.all %}
                        <label>#{{ label.keyword }}</label>
                    {% endfor %}
                </div>
                {% include "kjs/rainbow/frame/comment/widgets/_plugin.html" %}
            </div>
        </div>
    </div>
    {% include "kjs/common/widgets/_comment_widget.html" %}
{% endblock %}

{% block common_script %}
    {{ block.super }}
    <script type="text/javascript">
        var jquery = $, jQuery;
        (function($){
            $.fn.extend({
                rainbowJSLoadingWidget:function(){
                    var loadingWidget = $(this);
                    var loadingUrl = loadingWidget.find("a").attr("href");
                    loadingWidget.html("");
                    loadingWidget.load(loadingUrl);
                }
            });
        })(jquery);

        $(document).ready(function(){
            var jqueryLoadingWidgets = $("div.jqueryLoadWidget");
            for (var i=0; i<jqueryLoadingWidgets.size(); i++){
                var jqueryLoadingWidget = $(jqueryLoadingWidgets.get(i)).rainbowJSLoadingWidget();
            }
            $("div#rainbow_photoframe_comments_widget").find("form").find("button").click(function(){
                var form = $(this).parent().parent();
                var comment = $(this).parent().find("#id_comment");
                var server = form.attr("action");
                var method = form.attr("method");
                var name = comment.attr("name");
                var data = {};
                var csrftoken = form.find("input[name='csrfmiddlewaretoken']");
                data[name] = comment.val();
                data["csrfmiddlewaretoken"] = csrftoken.val();
                if (!$.isEmptyObject(data[name])) {
                    $.ajax({
                        url:server + "?format=json",
                        type:method,
                        data:data,
                        success:function(data){
                            comment.val("");
                            alert(data.comment);
                        }
                    });
                }
                return false;
            });
        });
    </script>
{% endblock %}